<template>
	<view class="chart">
		<scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 95vh;" @scrolltoupper="onScrollTop">
			<view class="chart-content">
				<uni-card v-if="carts.length > 0" v-for="(item,index) in carts" :key="index"  padding="2"
	 margin="0" style="padding: 0;margin: 0"
	 :is-shadow="false">
					<checkbox-group @change.stop="radioChange" style="padding: 0px;">
						<view class="order">
							<view class="shop">
								<view>
									<checkbox  :value="item.shopId" style="scale: 0.8;"
									></checkbox>
								</view>
								<view  style="display: flex;align-items: center;justify-content: center;" @click.stop="goShop(item.shopId)">
									<text>{{item.shopName}}</text>
									<uni-icons   style="display: flex;align-items: center;justify-content: center;" type="right" size="20" color="gray"></uni-icons>
								</view>
							</view>
							<checkbox-group  @change.stop="radioChange2">
								<view class="ordertail" v-for="(cart,indexcart) in item.shoppingCarts">
									<view>
										<checkbox :value="cart.id" style="scale: 0.8;"
										:checked="selectcartids.includes(cart.id)?true:false"></checkbox>
									</view>
									<view  @click.stop="gotoGoodInfo(cart.goodsId)" class="goodtext">
										<image  mode="aspectFill"  style="border-radius: 5px;width: 50%;height: 100px;" :src="cart.mainImage"></image>
										<view>
											<view class="goodname">{{cart.goodsName}}</view>
											<view  style="padding: 0;margin: 0;"  v-for="(spec,indexspec) in cart.productSpecificationsDesc">{{spec}}</view>
											<view class="price">
												¥ {{cart.unitPrice}}
											</view>
										</view>
										<view class="price2">
											<el-text>x {{cart.quantity}}</el-text>
										</view>
									</view>
								</view>
							</checkbox-group>
						</view>
					</checkbox-group>
				</uni-card>
				<uv-empty v-else text="请添加购物车" mode="car"></uv-empty>
			</view>
		</scroll-view>
		<view class="btn-buttom">
			<view>
				<checkbox-group  @change.stop="radioChange3">
					<checkbox style="scale: 0.7;"></checkbox>全选
				</checkbox-group>
			</view>
			<view class="btn-total">
				<view>
					<text>合计：</text> {{totalMoney}}
				</view>
				<uv-button text="结算" type="warning" custom-style="width:80px" @click="submitBtn"></uv-button>
			</view>
		</view>
		<loginDialog></loginDialog>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import {getCart,createOrder} from '@/api/shoppingcart.ts'
	import {getWxPayInfo} from '@/api/order.ts'
	import { ref ,onMounted, watchEffect} from 'vue'
	import loginDialog from '@/pages/personcenter/login.vue'
	import {baseUrl} from '@/api/request'
	const selectForm=ref({
		selectShop:null,
		selectGoods:null,
	})
	const onScroll =(e)=> {
		  console.log('滚动到底部了');
		  if(carts.value.length < total.value && total.value > 0){
			  queryParams.value.page++;
			  getCarts()
		  }
	}
	const onScrollTop =(e)=> {
		  console.log('滚动到顶部了');
		  queryParams.value.page=1;
		  getCarts()
	}
	const carts=ref([])
	const queryParams=ref({
		page:1,
		limit:10
	})
	const total=ref(0)
	const getCarts=()=>{
		getCart(queryParams.value).then(res=>{
			if(queryParams.value.page ==1){
				carts.value=res.data.list
			}else{
				carts.value=carts.value.concat(res.data.list) 
			}
			total.value=res.data.total
		})
	}
	onShow(()=>{
		if(!uni.getStorageSync('token')){
			uni.setStorageSync('login',true)
		}
		getCarts()
	})
	watchEffect(()=>{
		if(!uni.getStorageSync('token')){
			uni.setStorageSync('login',true)
		}
		getCarts()
	})
	const goShop=(val)=>{
		uni.navigateTo({
			url:"/pages/shop/index?id="+val
		})
	}
	const gotoGoodInfo=(val)=>{
		uni.navigateTo({
		  url:'/pages/goods/detail?id='+val,
		})
	}
	const selectcartids = ref([])
	const totalMoney=ref(0)
	const radioChange=(evt,r)=>{
		if(evt.detail.value.length > 0){
			carts.value.forEach(cart=>{
				if(parseInt(evt.detail.value[0]) === cart.shopId){
					let arrayid = []
					cart.shoppingCarts.forEach(info=>{
						arrayid.push(info.id)
						if(!info.totalPrice){
							info.totalPrice=0
						}
						totalMoney.value=totalMoney.value+info.totalPrice
					})
					selectcartids.value=arrayid
				}
			})
		}else{
			selectcartids.value=[]
			totalMoney.value=0
		}
		console.log("hao"+JSON.stringify(selectcartids.value)+"总计:"+totalMoney.value)
	}
	const radioChange2=(evt)=>{
		let arrayid = []
		totalMoney.value=0
		if(evt.detail.value.length > 0){
			evt.detail.value.forEach(val=>{
				carts.value.forEach(cart=>{
					cart.shoppingCarts.forEach(info=>{
						if(parseInt(val) == info.id){
							totalMoney.value=totalMoney.value+info.totalPrice
						}
					})
				})
				arrayid.push(parseInt(val))
			})
		}else{
			selectcartids.value=[]
			totalMoney.value=0
		}
		selectcartids.value = arrayid
		console.log("hao"+JSON.stringify(selectcartids.value)+"总计:"+totalMoney.value)
	}
	const radioChange3=(evt)=>{
		if(evt.detail.value.length > 0){
			let arrayid = []
			carts.value.forEach(cart=>{
				cart.shoppingCarts.forEach(info=>{
					arrayid.push(info.id)
					totalMoney.value=totalMoney.value+info.totalPrice
				})
			})
			selectcartids.value=arrayid
		}else{
			selectcartids.value=[]
			totalMoney.value=0
		}
		console.log("hao"+JSON.stringify(selectcartids.value)+"总计:"+totalMoney.value)
	}
	const submitBtn=()=>{
		if(selectcartids.value.length == 0){
			uni.showToast({
				title:'请先勾选'
			})
			return;
		}
		createOrder({"cartIds":selectcartids.value,"receivingAddressId":null}).then(resorder=>{
			if(resorder.code == 200 && resorder.data){
				getWxPayInfo({"amount":totalMoney.value,"menuOrderIds":resorder.data}).then(res=>{
					uni.requestPayment({
					    provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageVal,
						signType: res.data.signType,
						paySign:  res.data.paySign,
						success: function (res) {
							queryParams.value.page=1;
							getCarts();
						},
						fail: function (err) {
							queryParams.value.page=1;
							getCarts();
						}
					});
				})
			}
		})
	}
</script>
<style scoped>
	.chart-content{
		width: 100%;
		height: 95%;
	}
	.chart{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	.btn-buttom{
		width: 100%;
		position: sticky;
		bottom:0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		padding: 15px;
		border-top: 1px solid whitesmoke;
	}
	.btn-total{
		width: 60%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-right: 5px;
	}
/deep/ checkbox .wx-checkbox-input {
  border-radius: 50% !important;
}	
.price2{
	display: flex;
	flex-direction: row;
	text-align: right;
	width: 10%;
}
.goodname{
	color: black;
	font-weight: bold;
}	
.price{
	display: flex;
	justify-content: space-between;
	color: coral;
	font-size: 18px;
}
.order{
	width: 100%;
}
.ordertail image{
	width: 90px;
	height: 90px;
	border-radius: 5px;
}	
.order view{
	margin-bottom: 8px;
	margin-left: 5px;
}
.ordertail{
	display: flex;
	align-items: center;
}
.goodtext{
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.shop{
	display: flex;
	align-items: center;
}
.status{
	color: coral;
}
</style>